<!--  -->
<template>
  <div style="position: absolute; top: 50%; right: 20px; z-index: 1000">
    <el-button
      class="amintion-button"
      round
      size="large"
      type="success"
      @click="checkShow = !checkShow"
    >
      <el-icon><Operation /></el-icon>
      <span class="text-amintion">
        {{ checkShow ? '显示大图' : '批量操作' }}</span
      >
    </el-button>
  </div>
  <!-- 大图 -->

  <el-table-plus :tableData="useDataStore().imageTableData" v-if="checkShow">
  </el-table-plus>
  <el-timeline v-else style="margin-top: 40px">
    <el-timeline-item
      v-for="data in useDataStore().imageTableData"
      :key="data"
      timestamp="2018/4/12"
      placement="top"
    >
      <el-card>
        <el-image
          title="点击预览"
          :src="data.fileCover"
          style="width: 20%"
          :preview-src-list="[data.fileCover]"
        />
        <h4>
          <span> {{ data.fileName }}</span>
          <span style="margin-left: 10px">
            <el-button @click="downloadFilled(data.fileId)" link type="success"
              >下载</el-button
            >
            <el-button @click="deleteFilled(data.fileId)" link type="danger"
              >删除</el-button
            >
          </span>
        </h4>
        <p>when is created: {{ data.lastUpdateTime }}</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>

  <!-- 表格 -->
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useDataStore, useUserStore } from '@/stores/index'
import { selectFileType } from '@/request/common'
import ElTablePlus from '@/components/el-table-plus.vue'
import { deleteFileByFileId } from '@/request/download'
import { ElMessage, ElMessageBox } from 'element-plus'

// 数据
onMounted(async () => {
  const res = await selectFileType(useUserStore().UserInfo.userId, 3)
  useDataStore().setimageTableData(res.data || '')
})

//单文件下载-------------------------------
const downloadFilled = (fileId) => {
  //创建a标签将地址赋值给a标签的href属性，实现下载
  const a = document.createElement('a')
  a.href = `http://121.37.211.41:10010/down/downLoadFileByFileId?fileId=${fileId}`
  a.click()
}
//单文件删除-------------------------------------
const deleteFilled = (fileId) => {
  ElMessageBox.confirm('你确定要删除这个文件吗?', '🗑️删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      //发删除请求
      deleteFileByFileId(fileId).then(async () => {
        // const res = await selectFileType(useUserStore().UserInfo.userId, 3)
        // useDataStore().setimageTableData(res.data || '')
      })

      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {})
}

const checkShow = ref(false)
</script>

<style lang="scss" scoped>
.text-amintion {
  display: none;
}
.amintion-button {
  width: 10px;
  transition: all 0.5s;
}
.amintion-button:hover {
  width: 100px;
}
.amintion-button:hover .text-amintion {
  display: block;
}
</style>
